<template>
  <div>
    <div class="divOne">
      <div>
        <p> {{wer[0].product_name}} </p>
        <span>
          <ul>
            <li>概述</li>
            <li>参数</li>
            <li>用户评价</li>
          </ul>
        </span>
      </div>
    </div>
    <div class="divTwo">
      <div class="divItem">
        <!-- 轮播图  -->
        <div class="divItem1">
          <el-carousel >
            <el-carousel-item v-for="item in litTu" :key="item.id">
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 概述 -->
        <div class="divItem2">
            <p>{{wer[0].product_name}}</p>
            <p>{{wer[0].product_intro}}</p>
            <p>小米自营</p>
            <p>{{wer[0].product_price}}  元</p>
            <hr>
            <br>
            <div class="itemBottom">
                <div>
                    <span>{{wer[0].product_name}}</span>
                <span>{{wer[0].product_price}}</span>
                </div>
                <div>
                    总计： {{wer[0].product_price*wer[0].product_num}} 元
                </div>
            </div>
            <div class="shop">
                <button class="jia" @click="add">加入购物车</button>
                <button class="jia" @click="addOrder">喜欢</button>
            </div>
            <img src="../../../assets/bottom.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetails, getDetailsTu,addShop,addCollect } from "../../../api/api";
export default {
  data() {
    return {
      id: "",
      litTu: [],
      wer:[],
      userId:JSON.parse(localStorage.getItem("user") || [])
    };
  },
  created() {
    this.id = this.$route.params.productID;
    // this.id=this.$route.query.productID;
    console.log(this.id, "id");

    this.getList();
    this.getListTu();
  }, 
  methods: {
    // 加入购物车
    async add(){
      // this.$store.dispatch("unshiftShoppingCart",this.wer)
      let res=await addShop({product_id:this.id,user_id:this.userId.user_id})
      console.log(res);
            if (res.code == "001") {
        this.$notify.success({
          title: "成功",
          message: "加入购物车成功",
          type: "success",
        })
      }else if(res.code=="002"){
        
                  this.$notify.success({
          title: "成功",
          message: res.msg,
          type: "success",
        })
         
      }
    },
    // 加入收藏
    async addOrder(){
      let res=await addCollect(
        {
          product_id:this.wer[0].product_id,
          user_id:this.userId.user_id
        }
      )
      if(res.code=="001"){
                this.$notify.success({
          title: "成功",
          message: res.msg,
          type: "success",
        });
      }
      console.log(res,"res");
    },
    async getList() {
      let res = await getDetails({ productID: this.id });
      console.log(res, "resDetails");
       if (res.code == "001") {
        this.wer = res.Product;
      }
    },
    async getListTu() {
      let res = await getDetailsTu({ productID: this.id });
      console.log(res, "resTu");
      if (res.code == "001") {
        this.litTu = res.ProductPicture;
      }
    },
  },
};
</script>

<style scoped>
.divTwo {
  width: 100%;
  height: 560px;
  background-color: #fff;
}
.divTwo .divItem {
  width: 90%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.divItem .divItem1 {
  width: 30%;
  height: 100%;
}
.divItem .divItem2{
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 25px;
}
.divItem2 p:nth-child(1){
    font-size: 35px;
}
.divItem2 p:nth-child(2){
   color: #ddd;
}
.divItem2 p:nth-child(3){
    color: #ff6700;
}
.divItem2 p:nth-child(4){
    color: #ff6700;
}
.divItem2 .itemBottom{
    width: 90%;
    height: 20%;
    margin: auto;
    text-align: center;
    background-color: #ddd;
    padding: 20px;
}
.itemBottom div:nth-child(1){
    display: flex;
    justify-content: space-around;
}
.shop{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    margin-top: 10px;
}
.shop .jia{
    width: 48%;
    height: 100%;
    border: none;
    border-radius: 5px;
}
.shop button:nth-child(1){
    background-color: #ff6700;
}
.shop button:nth-child(2){
    background-color: #cbcbcb;
}
.el-carousel{
    height: 100%;
}
.el-carousel img{
    width: 100%;
    height: 100%;
}
.el-carousel-item img{
        width: 100%;
    height: 100%;
}


.divOne {
  width: 100%;
  height: 55px;
  line-height: 15px;
  box-shadow: 0px 15px 0px 0px #ddd;
  background-color: #fff;
}
.divOne div {
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin: auto;
  position: relative;
}
.divOne div p {
  font: normal 555 35px "黑体";
}
.divOne div ul {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  list-style: none;
  position: absolute;
  right: 10px;
}
.divOne div ul li {
  width: 33%;
}
</style>